<template>
  <div>
    <div class="box">
      <header>
        <p class="p1 iconfont icon-rijianmoshi">日间</p>
        <p>
          <span class="p2 iconfont icon-youjian"></span>
        </p>
      </header>
      <main>
        <div class="top1" @click="fun()">
          <div class="top1left">
            <div class="iconfont icon-touxiang"></div>
            <div>
              <p class="topp1" >点击登录</p>
              <p class="topp2">登录查看更多有趣内容</p>
            </div>
          </div>
          <div>></div>
        </div>
        <div class="bottom1">
          <div>
            <span class="iconfont icon-shuping"></span>
            <span>我的书评</span>
          </div>
          <div>
            <span class="iconfont icon-wenjianjia"></span>
            <span>缓存管理</span>
          </div>
          <div>
            <span class="iconfont icon-yuedulishi"></span>
            <span>阅读历史</span>
          </div>
          <div>
            <span class="iconfont icon-huanfu"></span>
            <span>换肤样式</span>
          </div>
        </div>
      </main>
      <div class="geren">
        <div class="grtop">个人中心</div>
        <div class="grbottom">
          <img src="wode/wode1_03.jpg" alt="">
          <img src="wode/wode2_03.jpg" alt="">
        </div>
      </div>
      <div class="yaoqing">
        <p class="yqp1 iconfont icon-huangguan">  邀请好友，领取奖励</p>
        <p class="yqp2">
          去推广
        </p>
      </div>
      <footer>
        <p class="ftp1">
          <span class="iconfont icon-xihao">  阅读喜好</span>
          <span>男生 ></span>
        </p>
        <p class="ftp1" @click="zong()">
          <span class="iconfont icon-guanyu"> 关于我们</span>
          <span> ></span>
        </p>
        <p class="ftp1" @click="kongbai()">
          <span class="iconfont icon-shezhi"> 我的设置</span>
          <span> ></span>
        </p>
      </footer>
    </div>
    <Oneluyou />
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.push('/denglu')
    },
    kongbai(){
      this.$router.push('/kongbai')
    },
    zong(){
      this.$router.push('/zong')
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  /* height: 10rem; */
  /* background: pink; */
  box-sizing: border-box;
  padding: 0 0.2rem;
  background: #f4f4f4;
  margin-bottom: .5rem;
}
header {
  height: 0.55rem;
  /* background: red; */
  display: flex;
  justify-content: right;
  align-items: center;
}
header .p1 {
  width: 0.61rem;
  height: 0.21rem;
  background: #e1e1e1;
  border-radius: 0.21rem;
  font-size: 0.12rem;
  line-height: 0.21rem;
  text-align: center;
  margin-right: 0.1rem;
}
header .p2 {
  height: 0.21rem;
  line-height: 0.21rem;
  /* background: yellow; */
}
main {
  height: 1.65rem;
  background: #ffffff;
  border-radius: 0.1rem;
  margin-bottom: .2rem;
}
main .top1 {
  height: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.2rem;
  color: #a6a6a6;
}
main .top1 .topp1 {
  font-size: 0.2rem;
  color: black;
  font-weight: 700;
  margin-bottom: 0.05rem;
  margin-left: .1rem;
}
main .top1 .topp2 {
  font-size: 0.12rem;
  color: #9d9d9d;
  margin-left: .1rem;
}
main .top1 .top1left{
  display: flex;
}
main .bottom1{
  display: flex;
  justify-content: space-between;
}
main .bottom1 div{
  width: .7rem;
  height: .8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.geren{
  height: 1.28rem;
  width: 100%;
  background: #ffffff;
  border-radius: 0.1rem;
  box-sizing: border-box;
  padding: 0 .2rem;
  margin-bottom: .2rem;
}
.geren .grtop{
  height: .54rem;
  line-height: .54rem;
}
.geren .grbottom{
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
}
.geren .grbottom img{
  width: 1.43rem;
  height: .59rem;
}
.yaoqing{
  height: .77rem;
  width: 100%;
  background: #e3cca0;
  box-sizing: border-box;
  border-radius: .2rem;
  display: flex;
  justify-content: space-between;
  padding: 0 .23rem;
  padding-top: .1rem;
}
.yaoqing .yqp2{
  width: .6rem;
  height: .24rem;
  background: black;
  color: white;
  border-radius: .6rem;
  text-align: center;
  font-size: .14rem;
}
.yaoqing .yqp1{
  color: #80643c;
}
footer{
  margin-top: -0.3rem;
  height: 1.73rem;
  background: white;
  border-radius: .2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
footer .ftp1{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: .2rem;
}
.iconfont{
  font-size: .2rem;
}
</style>